<template>
	<div class="header-info">
		<img src="~assets/image/3.jpg"/>
		<div class="info">
			<img src="~assets/image/4.png"/>
			<img src="~assets/image/5.png"/>
		</div>
	</div>
</template>

<script>
    export default {
        name: "HeaderInfo"
    }
</script>

<style scoped>
	.header-info {
		position: relative;
	}
	.header-info img {
		width: 100%;
	}
	.header-info .info {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50%;
		height: 50%;
		transform: translate(-50%,-50%);
		border: .01rem solid white;
		box-shadow: 0 .02rem .12rem 0 rgba(0, 0, 0, 0.1);
		border-radius: .2rem;
		background-color: rgba(0,0,0,.2);
		color: white;
	}
	.header-info .info img {
		width: 100%;
		height: 40%;
	}
</style>
